<template>
  <Layout :class="prefixCls" v-bind="lockEvents">
    <LayoutFeatures v-if="!isSpecialUser" />
    <LayoutHeader fixed v-if="getShowFullHeaderRef && !isSpecialUser" style="z-index: 600" />
    <Layout :class="[layoutClass]">
      <LayoutSideBar v-if="(getShowSidebar || getIsMobile) && !isSpecialUser" />
      <Layout :class="`${prefixCls}-main`" :style="{ marginLeft: isLightTheme ? '-14px' : 0 }">
        <LayoutMultipleHeader v-if="!isSpecialUser" />
        <LayoutContent />
        <LayoutFooter v-if="!isSpecialUser" />
      </Layout>
    </Layout>
  </Layout>
</template>

<script lang="ts">
  import { defineComponent, computed, unref, watch } from 'vue';
  import { Layout } from 'ant-design-vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import LayoutHeader from './header/index.vue';
  import LayoutContent from './content/index.vue';
  import LayoutSideBar from './sider/index.vue';
  import LayoutMultipleHeader from './header/MultipleHeader.vue';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useLockPage } from '/@/hooks/web/useLockPage';

  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useAppStore } from '/@/store/modules/app';
  import { useUserStoreWithOut } from '/@/store/modules/user';

  export default defineComponent({
    name: 'DefaultLayout',
    components: {
      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
      LayoutHeader,
      LayoutContent,
      LayoutSideBar,
      LayoutMultipleHeader,
      Layout,
    },
    setup() {
      const { prefixCls } = useDesign('default-layout');
      const { getIsMobile } = useAppInject();
      const { getShowFullHeaderRef } = useHeaderSetting();
      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();

      // Create a lock screen monitor
      const lockEvents = useLockPage();

      const isLightTheme = computed(() => {
        return useAppStore().getProjectConfig.menuSetting.bgColor === '#FCFDFF';
      });

      const isSpecialUser = computed(() => {
        return useUserStoreWithOut().getSpecialUser;
      });
      console.log(
        '%cisSpecialUser===>62： ',
        'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
        isSpecialUser.value,
        getShowSidebar.value,
      );

      watch(
        () => isLightTheme,
        (val) => {
          setTimeout(() => {
            (document.querySelector('.vben-layout-sideBar') as HTMLBRElement).style['box-shadow'] =
              val ? 'none' : '4px 0px 32px 0px rgba(125, 142, 164, 0.16)';
          });
        },
        {
          immediate: true,
        },
      );

      const layoutClass = computed(() => {
        let cls: string[] = ['ant-layout'];
        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
          cls.push('ant-layout-has-sider');
        }
        return cls;
      });

      return {
        getShowFullHeaderRef,
        getShowSidebar,
        prefixCls,
        getIsMobile,
        getIsMixSidebar,
        layoutClass,
        lockEvents,
        isLightTheme,
        isSpecialUser,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-default-layout';

  .@{prefix-cls} {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background-color: @content-bg;

    > .ant-layout {
      min-height: 100%;
    }

    &-main {
      width: 100%;
      margin-left: 1px;
    }
  }
</style>
